/*
 * @Author: jiu yin
 * @Date: 2024-06-13 16:32:37
 * @LastEditTime: 2024-06-19 18:25:15
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\message\index.tsx
 * jiu
 */
import { list_message, unread_message, read_message } from "@/api/home";
import { Badge, Pagination, Tabs } from "antd";
import { useEffect, useState } from "react";
import "./index.scss";
import { ClearOutlined } from "@ant-design/icons";
import { useRoute } from "@/hooks";

export default function index() {
	let { push } = useRoute();

	const onChange = (key: string) => {
		console.log(key);
		set_params({ ...params, status: Number(key) });
	};

	const items = [
		{
			key: "2",
			label: "订单消息",
		},
		{
			key: "1",
			label: "系统消息",
		},
	];

	//Badge 状态 1未读 2已读
	const Badge_status = (status: number) => {
		return <Badge status={status ? "processing" : "default"} />;
	};

	//分页
	let [message_list_data, set_message_list_data] = useState<any>([]);
	let [unread_message_data, set_unread_message_data] = useState<any>(0);
	let [is_refresh, set_is_refresh] = useState(false);
	let [params, set_params] = useState({ page: 1, total: 100, status: 1 });
	useEffect(() => {
		list_message({ page: params.page, limit: 10, status: params.status }).then((res: any) => {
			set_message_list_data(res.data.data);
			set_params({ ...params, total: res.data.total });
		});
		unread_message().then((res: any) => {
			set_unread_message_data(res.data.num);
		});
	}, [params.page, params.status, is_refresh]);

	return (
		<section className="ml-auto mr-auto w-920px">
			<Tabs defaultActiveKey="2" items={items} onChange={onChange} />
			<section className="flex justify-between text-14px cursor-pointer">
				<p className="c-#5C5F7A ">
					未读消息：<span className="c-#161940 font-700">{unread_message_data}</span>
				</p>
				<p
					style={{color:unread_message_data==0? "#16194049":"#161940d6"}}
					onClick={async () => {
						read_message();
						set_is_refresh(!is_refresh);
					}}>
					<ClearOutlined style={{ marginRight: "10px" }} />
					全部标记为已读
				</p>
			</section>
			<ul className="mt-13px message_ul c-#161940">
				{message_list_data.map((item: any, index: number) => (
					<li
						key={index}
						onClick={() => push("/message/detail?id=" + item.id)}
						className="h-60px flex items-center justify-between text-14px cursor-pointer border_li_bottom message_li">
						<div className="flex items-center">
							{Badge_status(item.status)}
							<p className=" font-700 ml-16px">{item.title}</p>
						</div>
						<p className="c-#9697A9">{item.created_at}</p>
					</li>
				))}
			</ul>
			<section className="flex justify-center mt-20px">
				<Pagination
					defaultCurrent={1}
					total={params.total}
					hideOnSinglePage={true}
					showSizeChanger={false}
					onChange={e => set_params({ ...params, page: e })}
				/>
			</section>
		</section>
	);
}
